<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 @mouseover="stop" @mouseout="play">{{num}}</h1>
      <ul>
        <li v-for="item in list">{{item.carName}}</li>
      </ul>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          num: 100,
          list: [],
        };
      },
      mounted() {
        this.play();
        this.getList();
      },
      methods: {
        play() {
          this.timer = setInterval(() => {
            this.num++;
          }, 1000);
        },
        stop() {
          clearInterval(this.timer);
        },
        async getList() {
          // 发送请求
          let { data } = await axios.get(
            "https://api.tf2sc.cn/api/tfcar/car/list?",
            {
              headers: {
                Platformtype: "h5",
              },
            }
          );
          this.list = data.data.content;
        },
      },
      // 销毁前 销毁定时器
      beforeUnmount() {
        this.stop();
      },
    });

    // mounted  beforeUnmount
    app = app.mount("#app");
  </script>
</html>
